<template>
  <div>
    <table border="1" style="width: 100%; border-collapse: collapse;">
      <thead>
        <tr>
          <th>ID</th>
          <th>分类</th>
          <th>分类ID</th>
          <th>全名</th>
          <th>简称</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in disciplineMappings" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.category }}</td>
          <td>{{ item.category_id }}</td>
          <td>{{ item.full_name }}</td>
          <td>{{ item.short_name }}</td>
        </tr>
      </tbody>
    </table>
    <div class="pagination">
      <button @click="goToPrevPage" :disabled="!previousPage">上一页</button>
      <span class="page-info"> {{ currentPage }} / {{ totalPages }}</span>
      <button @click="goToNextPage" :disabled="!nextPage">下一页</button>
    </div>
  </div>
</template>

<script lang="ts">
import axios from 'axios';

export default {
  data() {
    return {
      disciplineMappings: [] as Array<{
        id: number;
        category: string;
        category_id: string;
        full_name: string;
        short_name: string;
      }>,
      currentPage: 1,
      nextPage: null as string | null,
      previousPage: null as string | null,
      totalCount: 0,
      itemsPerPage: 20 // 假设每页显示20条数据
    };
  },
  computed: {
    totalPages(): number {
      return Math.ceil(this.totalCount / this.itemsPerPage);
    }
  },
  created() {
    this.fetchDisciplineMappings();
  },
  methods: {
    async fetchDisciplineMappings(url: string = 'http://127.0.0.1:8000/api/DisciplineMapping/') {
      try {
        const response = await axios.get(url);
        this.disciplineMappings = response.data.results;
        this.totalCount = response.data.count;
        this.nextPage = response.data.next;
        this.previousPage = response.data.previous;
        console.log('Discipline Mappings:', this.disciplineMappings);
      } catch (error) {
        console.error('Error fetching discipline mappings:', error);
      }
    },
    async goToNextPage() {
      if (this.nextPage) {
        this.fetchDisciplineMappings(this.nextPage);
        this.currentPage++;
      }
    },
    async goToPrevPage() {
      if (this.previousPage) {
        this.fetchDisciplineMappings(this.previousPage);
        this.currentPage--;
      }
    }
  }
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  background-color: white; /* 设置表格背景颜色为白色 */
  color: black; /* 设置文字颜色为黑色 */
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2; /* 保持表头背景颜色不变 */
}

tr:nth-child(even) {
  background-color: #f9f9f9; /* 保持偶数行背景颜色不变 */
}

tr:hover {
  background-color: #f1f1f1; /* 保持悬停背景颜色不变 */
}

.pagination {
  display: flex;
  justify-content: flex-end; /* 将内容靠右对齐 */
  align-items: center;
  margin-top: 20px;
}

.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #ddd;
  background-color: white;
  cursor: pointer;
}

.pagination button:disabled {
  background-color: white;
  cursor: not-allowed;
}

.page-info {
  background-color: white; /* 设置白色背景 */
  padding: 5px 10px; /* 添加内边距 */
  margin: 0 5px; /* 添加左右外边距 */
  border: 1px solid #ddd; /* 添加边框 */
}
</style>
